<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/shouye.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <title>三星商城</title>
</head>
<body>
    <header>
        <div class="header_mengceng"></div>
        <ul>
            <li><a href="javascript:;">三星官网</a></li>
            <li><a href="javascript:;">盖乐世社区</a></li>
            <li><a href="javascript:;">三星网上商城VIP用户专属服务上线<i class="iconfont icon-office-supplies"></i></a></li>
            <li><a href="javascript:;">
                <i class="iconfont icon-dianhua"></i>
                400 071 8899
            </a></li>
        </ul>
    </header>
    <nav>
        <img class="logo" src="../images/头部logo.png" alt="">
        <div class="nav_box">
            <li><a href="javascript:;">智能手机</a></li>
            <li><a href="javascript:;">可穿戴设备</a></li>
            <li><a href="javascript:;">平板/电脑/存储</a></li>
            <li><a href="javascript:;">智能产品配件</a></li>
            <li><a href="javascript:;">电视/影音/显示器</a></li>
        </div>
        <input type="text">
        <li class="denglu"><a href="../html/register.htm" target="_blank"> <i class="iconfont icon-gouwuche1"></i>登录/注册</a></li>
    </nav>
  
    <div class="banner">
        <div class="fuzhu"></div>
        //用来存放图片的容器
        <ul class="list">
            
        </ul>
        //创建页面底部用来滚动的容器
        <div class="pagination"></div>
        <div class="prev">&lt;</div>
        <div class="next">&gt;</div>

        <div class="zhineng_erji">
           
            <input class="guanBi" type="button" value="×">
            <div class="off">
                <section class="erjiZuoBian">
                        <li><a href="javascript:;">智能手机</a><b>></b></li>
                        <li><a href="javascript:;">三星 W</a><b>></b></li>
                        <li><a href="javascript:;">Galaxy Z</a><b>></b></li>
                        <li><a href="javascript:;">Galaxy S</a><b>></b></li> 
                        <li><a href="javascript:;">Galaxy Note</a><b>></b></li>
                        <li><a href="javascript:;">Galaxy A</a><b>></b></li>
                        <li><a href="javascript:;">Galaxy F</a><b>></b></li>
                </section>
                <section class="erjiYouBian">
                   
                        <ul id="">
                            <li><a href="javascript:;">全系列产品</a></li>
                            <li><a href="javascript:;">三星W22 5G </a></li>
                            <li><a href="javascript:;">三星W21 5G</a></li>
                            
                        </ul>
                        <ul class="off">
                            <li><a href="javascript:;">全系列产品</a></li>
                            <li><a href="javascript:;">Galazy Z Fold3 5G</a></li>
                            <li><a href="javascript:;">Galazy Z Flip3 5G</a></li>
                            <li><a href="javascript:;">Galazy Z Fold2 5G</a></li>
                            <li><a href="javascript:;">Galazy Z Filp 5G</a></li>
                            <li><a href="javascript:;">Galaxy Z Flip3 Thom Browne版 </a></li>
                            <li><a href="javascript:;">Galaxy Z Fold3 Thom Browne 版</a></li>
                            <li><a href="javascript:;">Galaxy Z Flip3 5G 甜粉少女</a></li>
                        </ul>
                   
                    
                        <ul class="off">
                            <li>全系列产品</li>
                            <li> Galaxy S21 Ultra 5G</li>
                            <li> Galaxy S21+ 5G</li>
                            <li> Galaxy S21 5G</li>
                            <li> Galaxy S20 FE 5G </li>
                        </ul>
                    
                    
                        <ul class="off">
                            <li>全系列产品</li>
                            <li>Galaxy Note20 Ultra 5G </li>
                        </ul>
                    
                    
                        <ul class="off">
                            <li>全系列产品</li>
                            <li>Galaxy A52 5G </li>
                            
                        </ul>
                    
                    
                        <ul class="off">
                            <li>全系列产品</li>
                            <li>Galaxy F52 5G </li>
                           
                        </ul>
                    
                    
                        <ul class="off">
                            <li>全系列产品</li>
                            <li> Galaxy S21 Ultra 5G</li>
                            <li> Galaxy S21+ 5G</li>
                            <li> Galaxy S21 5G</li>
                            <li> Galaxy S20 FE 5G </li>
                        </ul>
                    
                </section>
                <section>
                    <img class="erji_1tu" src="../images/手机二级图.png" alt="">
                    <ul>
                        <li><a href="javascript:;">可穿戴设备</a></li>
                        <li><a href="javascript:;">了解更多</a></li> 
                    </ul>
                </section>
                  
                
                
            </div>
            <div class="off">
                <section class="erjiZuoBian">
                    
                    <li ><a href="javascript:;">可穿戴设备</a><b>></b></li>
                    <li ><a href="javascript:;"> Samsung Galaxy Watch</a><b>></b></li>
                    <li ><a href="javascript:;"> Samsung Galaxy Buds</a><b>></b></li>
                    <li ><a href="javascript:;"></a></li> 
                    <li ><a href="javascript:;"></a></li>
                    <li ><a href="javascript:;"></a></li>
                    <li ><a href="javascript:;"></a></li>
               
            </section>
            <section class="erjiYouBian">
                    <ul id="">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 Classic 蓝牙版 46mm </a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 Classic 蓝牙版 42mm</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 蓝牙版 44mm</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 蓝牙版 40mm</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 Classic LTE版 46mm</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 Classic Thom Browne限量版</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Watch4 Maison Kitsuné限量版  </a></li>
                        
                    </ul>
                    <ul class="off">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Buds2</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Buds Pro</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Buds Live</a></li>
                        <li><a href="javascript:;">Samsung Galaxy Buds+</a></li>
                        <li><a href="javascript:;"> Samsung Galaxy Buds2 Maison Kitsuné限量版 </a></li>
                        
                    </ul>
               
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                    <ul class="off">
                    </ul>
                    <ul class="off">
                    </ul>
                    <ul class="off">
                    </ul>
                    <ul class="off">
                    </ul>
            </section>
            <section>
                <img class="gouzi" src="../images/耳机图.png" alt="">
                <ul>
                    <li><a href="javascript:;">可穿戴设备</a></li>
                    <li><a href="javascript:;">了解更多</a></li> 
                </ul>
            </section>
            </div>
            <div class="off">
                <section class="erjiZuoBian">
                    <li ><a href="javascript:;">平板/电脑/存储</a><b>></b></li>
                    <li ><a href="javascript:;">三星 W</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy Z</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy S</a><b>></b></li> 
                    <li ><a href="javascript:;">Galaxy Note</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy A</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy F</a><b>></b></li>
            </section>
            <section class="erjiYouBian">
               
                    <ul id="">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">三星W22 5G </a></li>
                        <li><a href="javascript:;">三星W21 5G</a></li>
                        
                    </ul>
                    <ul class="off">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">Galazy Z Fold3 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Flip3 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Fold2 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Filp 5G</a></li>
                        <li><a href="javascript:;">Galaxy Z Flip3 Thom Browne版 </a></li>
                        <li><a href="javascript:;">Galaxy Z Fold3 Thom Browne 版</a></li>
                        <li><a href="javascript:;">Galaxy Z Flip3 5G 甜粉少女</a></li>
                    </ul>
               
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy Note20 Ultra 5G </li>
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy A52 5G </li>
                        
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy F52 5G </li>
                       
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                
            </section>
            <section>
                <img class="mao1" src="../images/笔记本电脑.png" alt="">
                <ul>
                    <li><a href="javascript:;">可穿戴设备</a></li>
                    <li><a href="javascript:;">了解更多</a></li> 
                </ul>
            </section>
              

            </div>
            <div class="off">
                <section class="erjiZuoBian">
                    <li ><a href="javascript:;">智能产品配件</a><b>></b></li>
                    <li ><a href="javascript:;">三星 W</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy Z</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy S</a><b>></b></li> 
                    <li ><a href="javascript:;">Galaxy Note</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy A</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy F</a><b>></b></li>
            </section>
            <section class="erjiYouBian">
               
                    <ul id="">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">三星W22 5G </a></li>
                        <li><a href="javascript:;">三星W21 5G</a></li>
                        
                    </ul>
                    <ul class="off">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">Galazy Z Fold3 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Flip3 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Fold2 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Filp 5G</a></li>
                        <li><a href="javascript:;">Galaxy Z Flip3 Thom Browne版 </a></li>
                        <li><a href="javascript:;">Galaxy Z Fold3 Thom Browne 版</a></li>
                        <li><a href="javascript:;">Galaxy Z Flip3 5G 甜粉少女</a></li>
                    </ul>
               
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy Note20 Ultra 5G </li>
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy A52 5G </li>
                        
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy F52 5G </li>
                       
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                
            </section>
            <section>
                <img class="mao2" src="../images/手机保护壳.png" alt="">
                <ul>
                    <li><a href="javascript:;">可穿戴设备</a></li>
                    <li><a href="javascript:;">了解更多</a></li> 
                </ul>
            </section>
              
            </div>
            <div class="off">
                <section class="erjiZuoBian">
                    <li ><a href="javascript:;">电视/影音/显示器</a><b>></b></li>
                    <li ><a href="javascript:;">三星 W</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy Z</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy S</a><b>></b></li> 
                    <li ><a href="javascript:;">Galaxy Note</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy A</a><b>></b></li>
                    <li ><a href="javascript:;">Galaxy F</a><b>></b></li>
            </section>
            <section class="erjiYouBian">
               
                    <ul id="">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">三星W22 5G </a></li>
                        <li><a href="javascript:;">三星W21 5G</a></li>
                        
                    </ul>
                    <ul class="off">
                        <li><a href="javascript:;">全系列产品</a></li>
                        <li><a href="javascript:;">Galazy Z Fold3 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Flip3 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Fold2 5G</a></li>
                        <li><a href="javascript:;">Galazy Z Filp 5G</a></li>
                        <li><a href="javascript:;">Galaxy Z Flip3 Thom Browne版 </a></li>
                        <li><a href="javascript:;">Galaxy Z Fold3 Thom Browne 版</a></li>
                        <li><a href="javascript:;">Galaxy Z Flip3 5G 甜粉少女</a></li>
                    </ul>
               
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy Note20 Ultra 5G </li>
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy A52 5G </li>
                        
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li>Galaxy F52 5G </li>
                       
                    </ul>
                
                
                    <ul class="off">
                        <li>全系列产品</li>
                        <li> Galaxy S21 Ultra 5G</li>
                        <li> Galaxy S21+ 5G</li>
                        <li> Galaxy S21 5G</li>
                        <li> Galaxy S20 FE 5G </li>
                    </ul>
                
            </section>
            <section>
                <img class="mao" src="../images/电视.png" alt="">
                <ul>
                    <li><a href="javascript:;">可穿戴设备</a></li>
                    <li><a href="javascript:;">了解更多</a></li> 
                </ul>
            </section>
              
            </div>
        </div>
    </div>
    <script src="./move.js"></script>
    <script>
        //获取元素
        var nav=document.querySelector('nav')
        var guanBi=document.querySelector('.guanBi')
        var nav_li =document.querySelectorAll('.nav_box li')
        var zhineng_erji=document.querySelector('.zhineng_erji')
        var zhineng_erji_All=document.querySelectorAll('.zhineng_erji div')
        var nav_li_a =document.querySelectorAll('.nav_box li a')
        var header_mengceng=document.querySelector('.header_mengceng')
        var erjiZuoBian=document.querySelectorAll('.erjiZuoBian li')
        var erjiYouBian=document.querySelectorAll('.erjiYouBian ul')
        var erji_1tu=document.querySelector('.erji_1tu')
        var gouzi=document.querySelector('.gouzi')
        var mao=document.querySelector('.mao')
        var mao1=document.querySelector('.mao1')
        var mao2=document.querySelector('.mao2')
        var jiantou=document.querySelectorAll('.erjiZuoBian li b')
        var ha=document.querySelector('.fuzhu')
        console.log(ha)
        
       ha.onmouseout=function(){
        zhineng_erji.style.height='0px'
        console.log(11111)
       }
        
       //注册事件，当鼠标点击 nav_li 二级显示

//——————————————————————————————控制二级————————————————————————————
      nav_li.forEach(function(a,b){
        a.onmouseover=function(){
            for(var i=0;i<zhineng_erji_All.length;i++){
                zhineng_erji_All[i].className='off'
            }
            zhineng_erji.style.height='660px'
            this.style.backgroundColor='black'
            nav_li_a[b].style.color='white'
            header_mengceng.style.backgroundColor='rgba(0, 0, 0, .5)'
            zhineng_erji_All[b].className='' 
       }
        a.onmouseout=function(){
            //zhineng_erji.style.height='0px'
            this.style.backgroundColor=''
            nav_li_a[b].style.color='black'
          
       }

// ——————————————————————————控制二级的开关————————————————————————————————
       guanBi.onclick=function(){
        for(var i=0;i<zhineng_erji_All.length;i++){
                zhineng_erji_All[i].className='off'
            }
        zhineng_erji.style.height='0px'
        header_mengceng.style.backgroundColor=''
      }
      })
// ——————————————————————————控制三级——————————————————————————————————————

      erjiZuoBian.forEach(function(a,b){
           a.onmouseover=function(){
             
               for(i=0;i<erjiZuoBian.length;i++){
                erjiYouBian[i].className='off'
                //jiantou[i].style.display='none'
               }
               erjiZuoBian[b].style.fontWeight='bold'
               erjiYouBian[b].className=''
               jiantou[b].style.display='flex'
           }
           a.onmouseout=function(){
            erjiZuoBian[b].style.fontWeight=''
            //jiantou[b].className=''
            jiantou[b].style.display='none'
           }
       })


       erji_1tu.onmouseover=function(){
           erji_1tu.style.width='370px'
       }
       erji_1tu.onmouseout=function(){
           erji_1tu.style.width='350px'
       }

       var fun=function(a){
       a.onmouseover=function(){
           this.style.width='370px'
       }
       a.onmouseout=function(){
           this.style.width='350px'
       }
    }
    fun(gouzi);fun(mao);fun(mao1);fun(mao2);
//------------------------------图片轮播------------------------------------
//创建数组arr来存放对象

let arr = [
            {
                imgUrl:'../images/轮播1.jpg'
            },
            {
                imgUrl: '../images/轮播2.jpg'
            },
            {
                imgUrl: '../images/轮播3.jpg'
            },
            {
                imgUrl: '../images/轮播4.jpg'
            },
            {
                imgUrl: '../images/轮播5.jpg'
            },
            {
                imgUrl: '../images/轮播6.jpg'
            },
            {
                imgUrl: '../images/轮播1.jpg'
            }
        ]
        //获取存放图片的容器以及存放底部滚动条的容器
        var oList = document.querySelector('.list')
        var oPage = document.querySelector('.pagination')
        //1.循环arr数组
        arr.forEach((ele, index) => {
            //创建一个对象，他就是单个形式的将要渲染到容器中的元素
                        //因为是ul，所以要填充进去的元素最外围是li，图片用a标签包围
                        //${ele.imgUrl}来填充数组中循环得来的图片地址
                        //前后用反引号包围
            let str = `<li>
                        <a href="javascript:">
                        <img src="${ele.imgUrl}" alt="">
                        </a>
                        </li>`
                        //每循环一次就把str,也就是html格式用.innerHTML来填充进oList也就是装填图片容器的内部
            oList.innerHTML += str
                        //这里是填充进图片下面的小圆点的容器
            oPage.innerHTML += `<span class="${index === 0 ? 'on' : ''}"></span>`
        })
       /*  //克隆olist里面第一张图片
        let clone=oList.children[0].cloneNode(true)
        //用appendChild方法把复制来的第一张图片放到olist最后一个节点的位置
        oList.appendChild(clone) */
        //oList.style.width=oList.children.length*oList.children[0].offsetWidth+'px'
        //获取上面填充进去的pagination 里面的 span因为要填充进去才能获取
        var aBtn = document.querySelectorAll('.pagination span')
        //定义一个下标变量 初始量为0 为之后要开始的图片轮播和下面的小点切换准备
        let iNow = 0

        //开始轮播
        //循环上面循环填充进来的span，也就是下面的小点
        aBtn.forEach((ele, index) => {
            //循环得到的元素ele添加监听，当点击的时候，就触发函数
           /*  ele.addEventListener('click', function () {
                //这个函数的作用就是让当前的inow全局下表数值等于index,这个inow会代替这个循环中的index参加下一个函数的循环
                iNow = index
                //接下来触发tab函数，这个函数的作用通过上一个函数积累的下标来决定图片的切换以及下面小圆点的变色
                tab()
            }) */
            ele.onclick=()=>{
                console.log(111)
                iNow = index
                tab()
            }
        })
        //接下来进入关键，图片切换函数
        function tab() {
            //这个函数进来的第一步就是清除所有下面小圆点的class名,因为小圆点的颜色是通过class来控制的所以相当于每一次点击就会先清除所有小圆点的颜色
            for (var i = 0; i < aBtn.length; i++) {
                aBtn[i].className = ''
            }
            //清除完所有的小圆点的颜色之后开始给当次循环的小圆点class名，让它变色
            aBtn[iNow].className = 'on'
            //然后给list这个长条图片切换位置，每次向左切换一个图片的长度*当前的下标，因为图片是向右超出容器的，所以每次向左移动负值
            //oList.style.left = - iNow * 1353 + 'px'
            move1(oList,{left:- iNow * oList.children[0].offsetWidth})
        }
        //获取左边和右边的切换按钮
        var oNext = document.querySelector('.next')
        var oPrev = document.querySelector('.prev')

        oNext.onclick=next
        function next(){
           
            iNow++
            console.log(iNow);
            if(iNow===7){
                oList.style.left=0
               /*  iNow=1 */
               iNow=0
            }
            
            tab()
        }
        oPrev.onclick=()=>{
            iNow--
           
            if(iNow===-1){
                oList.style.left='-9471px'
               iNow=5
            }
            tab()
        }
        /* setInterval(function(){
            next()
        },3000) */
    </script>
    <div class="xiding">
        <div class="xiding_nei">
           <!--  <a href="javascript:;">
                <img src="../images/吸顶1.png" alt="">
            </a>
            <span>手机时刻</span> -->
        </div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
        <div class="xiding_nei"></div>
    </div>

    <div class="shangpinzhanshi1">
       <!-- <section>
           <a href="javascript:;">
               <img src="../images/三星首页_03.jpg" alt="">
           </a>
           <ul>
               <li>三星会员周</li>
               <li>新品抢先</li>
               <li>最高优惠</li>
               <li><a href="javascript:;"></a></li>
           </ul>
       </section> -->
      
    </div>
    <script>
        //开始创建数据库
        var haibao=[
            {
                imgUrl:'../images/三星首页_03.jpg',
                one:'三星会员周',
                two:'新品尝鲜 定金预售',
                three:'手机至高优惠￥2,400',
                four:'立即预定'
                
            },
            {
                imgUrl:'../images/三星首页_05.jpg',
                one:'新款豪华超级无敌限量大耳机特价甩卖',
                two:'11月1日全款预订开启',
                three:'敬请期待',
                four:'预约登记'
                
            },
            {
                imgUrl:'../images/三星首页_07.jpg',
                one:'三星会员周 电视火热预售',
                two:'100定金抵至高2600元',
                three:' ',
                four:'立即预定'
                
            },
        ]
        var shangpinzhanshi1=document.querySelector('.shangpinzhanshi1')
        haibao.forEach((ele,index)=>{
            shangpinzhanshi1.innerHTML+=`<section>
           <a href="javascript:;">
               <img src="${ele.imgUrl}" alt="">
           </a>
           <ul>
               <li>${ele.one}</li>
               <li>${ele.two}</li>
               <li>${ele.three}</li>
               <li><a href="javascript:;">${ele.four}</a></li>
           </ul>
       </section>`
        })
        
    </script>
    <div class="heng_tiao_guang_gao">
        <a href="javascript:;">
            <img src="../images/长条广告.jpg" alt="">
        </a>
    </div>
    <div class="re_xiao_tui_jian">
        热销推荐
    </div>
    <div class="re_xiao_tui_jian_mian">
       
    </div>
    <script>
        //开始写入
        var rexiao=[
            {
                xinghao:'Galaxy 2 filp3 5G',
                youhui:'最高享受12期0利率',
                tedian:' 掌心折叠设计|立式交互体验',
                gengduo:'查看更多',
                imgUrl:'../images/手机商品图1.gif'
            },
            {
                xinghao:'Galaxy Z fold3 5G',
                youhui:'最高享受12期0利率',
                tedian:'沉浸式屏下摄像折叠屏',
                gengduo:'查看更多',
                imgUrl:'../images/手机商品图2.gif'
            },
            {
                xinghao:'Galaxy S21 5G 8GB+128GB',
                youhui:'至高立省900元',
                tedian:'6.2英寸120Hz超顺护目屏',
                gengduo:'查看更多',
                imgUrl:'../images/手机商品图3.gif'
            },
        ]
        var re_xiao_tui_jian_mian=document.querySelector('.re_xiao_tui_jian_mian')
        rexiao.forEach((ele,index)=>{
            re_xiao_tui_jian_mian.innerHTML+=`<section>
            <ul>
                <li>
                    <a href="javascript:;">
                        ${ele.xinghao}
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        ${ele.youhui}
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        ${ele.tedian}
                       
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        查看更多
                    </a>
                </li>
            </ul>
            <a href="javascript:;">
                <img src="${ele.imgUrl}" alt="">
            </a>
        </section>`
        })

    </script>
    <div class="re_xiao_tui_jian">
        新品区
    </div>
    <div class="xin_pin_qu">
        <div class="xin_pin_qu-left">
            <img src="../images/新品区1.jpg" alt="">
            <ul>
                <li><a href="javascript:;">三星W22 5G</a></li>
                <li><a href="javascript:;">新品上市</a></li>
                <li><a href="javascript:;">￥16,999.00</a></li>
            </ul>
        </div>
        <div class="xin_pin_qu-right">
           <!--  <section>
                <a href="javascript:;">
                    <img src="../images/新品区2.jpg" alt="">
                </a>
                <ul>
                    <li><a href="javascript:;">111111</a></li>
                    <li><a href="javascript:;">222222</a></li>
                    <li><a href="javascript:;">333333</a></li>
                </ul>
            </section>
            <section></section>
            <section></section>
            <section></section> -->
        </div>
    </div>  
    <script>
        var shuju1=[
            {
                name:'Galaxy Z fold3 5G 陨石黑',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
                imgUrl:'../images/新品区2.jpg'

            },
            {
                name:'Galaxy Z filp3 5G 月光香槟 8+128GB',
                youhui:'',
                price:'￥7,599.00',
                imgUrl:'../images/新品区3.jpg'
            },
            {
                name:' Samsung Galaxy Buds2 香缇绿',
                youhui:'稀缺臻品 享6期0利率',
                price:'￥899.00',
                imgUrl:'../images/新品区4.jpg'
            },
            {
                name:'66英寸级 三星NeoQLED光质量子点电视',
                youhui:'赠HW-Q600A音响',
                price:'￥19,999.00',
                imgUrl:'../images/新品区5.jpg'
            },
        ]
        var xinpin=document.querySelector('.xin_pin_qu-right')
        shuju1.forEach((ele,index)=>{
            xinpin.innerHTML+=` <section>
                <a href="javascript:;">
                    <img src="${ele.imgUrl}" alt="">
                </a>
                <ul>
                    <li><a href="javascript:;">${ele.name}</a></li>
                    <li><a href="javascript:;">${ele.youhui}</a></li>
                    <li><a href="javascript:;">${ele.price}</a></li>
                </ul>
            </section>`
        })
    </script>  
    <div class="re_xiao_tui_jian">
        智能手机
    </div>
    <div class="zhi_neng_shou_ji">
        <div class="z_left">
            <img src="../images/智能手机页面大图.png" alt="">
        </div>
        <div class="z_right_top">
            <section>
                <!-- <a href="javascript:;">
                    <img src="../images/智能手机页面1.jpg" alt="">
                <ul>
                    <li>aaaaaaa</li>
                    <li>bbb</li>
                    <li>ccc</li>
                    <li>ddd</li>
                </ul>
                </a> -->
            </section>
            <section></section>
            <section></section>
            <section></section>
        </div>
        <div class="z_right_b">
            <div class="shangyige"><</div>
            <div class="xiayige">></div>
            <div class="dibu_lunbo">
               <section>

               </section>
               <section></section>
               <section></section>
               <section></section>
               <section></section>
               <section></section>
               <section></section>
               <section></section>
        </div>
    </div>
   <script>
       //获取定位长条
       var dibu_lunbo=document.querySelector('.dibu_lunbo')
       //获取按钮
       var xiayige=document.querySelector('.xiayige')
       var shangyige=document.querySelector('.shangyige')
       //创建监听事件，当点击按钮的时候长条向左移动 传参顺序：右边按钮 左边按钮 轮播长条 商品总数 希望一页展示的数量
       move(xiayige,shangyige,dibu_lunbo,8,4)
       function move(obj1,obj2,obj3,n,m){
        var aaa=0
       obj1.addEventListener('click',function(){
          obj2.style.backgroundColor='white'
           this.style.backgroundColor='white'
        if(aaa<=n-1-m){
            aaa++
            obj3.style.left= - aaa * 250 + 'px'
        }else{
            this.style.backgroundColor='black'
        obj3.style.left= - aaa * 250 + 'px'
        }
       })
       obj2.addEventListener('click',function(){
        this.style.backgroundColor='white'
        obj1.style.backgroundColor='white'
        if(aaa>=1){
            aaa--
            obj3.style.left= - aaa * 250 + 'px'
        }else{
            this.style.backgroundColor='black'
            obj3.style.left= - aaa * 250 + 'px'
            console.log(aaa)
        }
    
       })
    }
       //开始渲染
       var zhineng_ku=[
           {
                imgUrl:'../images/智能手机页面1.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'8GB+128GB',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面2.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面3.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面4.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面5.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面6.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面7.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面6.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面5.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面4.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面3.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
           {
                imgUrl:'../images/智能手机页面2.jpg',
                ame:'Galaxy Z fold3 5G 陨石黑',
                chucun:'&nbsp;',
                youhui:'稀缺臻品 享12期分期0利率',
                price:'￥14,999.00',
           },
       ]
        //获取页面中所有的section
        var all_section=document.querySelectorAll('.zhi_neng_shou_ji section')
        //开始循环数组
        zhineng_ku.forEach((ele,index)=>{
            all_section[index].innerHTML+=`<a href="javascript:;">
                        <img src="${ele.imgUrl}" alt="">
                        <ul>
                            <li>${ele.ame}</li>
                            <li>${ele.chucun}</li>
                            <li>${ele.youhui}</li>
                            <li>${ele.price}</li>
                        </ul>
                        </a>`
            
        })
       /*  var all_img=document.querySelectorAll('.zhi_neng_shou_ji section img')
        console.log(all_img)
        all_img.forEach(ele => {
            // console.log(ele.offsetTop)
            //offsetTop 元素到顶部的距离
            //window.innerHeight 可视区域高度
            //document.documentElement.scrollTop 滚动距离的可视高度
            if (ele.offsetTop < window.innerHeight + document.documentElement.scrollTop) {
                ele.src = ele.getAttribute('_src')
            }
        }) */

       /*  window.onscroll = function () {
            all_img.forEach(ele => {
                // console.log(ele.offsetTop)
                if (ele.offsetTop < window.innerHeight + document.documentElement.scrollTop) {
                    ele.src = ele.getAttribute('_src')
                }
            })
        } */
   </script>
   <!-- <div class="heng_tiao_guang_gao">
    <a href="javascript:;">
        <img src="../images/秒杀广告.jpg" alt="">
    </a>
    </div> -->
    <div class="gou"></div>
    <div class="miaosha">
        <div class="miaosha_top">
            <ul>
                <li>秒杀专区</li>
                <li>距离秒杀结束还有</li>
            </ul>
            <div class="daojishi">
                <section id="_h"></section>
                <p>:</p>
                <section id="_m"></section>
                <p>:</p>
                <section id="_s"></section>
            </div>
        </div>
        <div class="miaosha_b">
            <div class="back"></div>
            <div class="next1"></div>
            <div class="miaosha_lun">
               <!--  <section>
                    <img src="../images/秒杀专区1.jpg" alt="">
                    <ul>
                        <li>aaa</li>
                        <li>bbb</li>
                        <li>ccc<span>bbb</span></li>
                    </ul>
                </section>
                <section></section>
                <section></section>
                <section></section>
                <section></section>
                <section></section>
                <section></section>
                <section></section>
                <section></section> -->
            </div>
    </div>
        </div>
    <script>
        countTime()
        function countTime(){
            //首先获取本地时间
            var date=new Date()
            //console.log(date);
            //获取当前时间到1760年的时间戳
            var now=date.getTime()
            //设置截至时间
            var str='2023/11/3 00:00:00'
            //将截止时间转换
            var endDate=new Date(str)
            //截至时间到1970年的时间戳
            var end = endDate.getTime()
            //两个时间戳相减，得到截止时间和当前时间的时间差 数字形式
            var leftTime = end-now;
           
            
            
            var d,h,m,s
                 d = Math.floor(leftTime/1000/60/60/24) 
                 h = Math.floor(leftTime/1000/60/60%24) 
                 m = Math.floor(leftTime/1000/60%60) 
                 s = Math.floor(leftTime/1000%60)                     
              
             document.getElementById("_h").innerHTML = h+"时"
             document.getElementById("_m").innerHTML = m+"分"  
             document.getElementById("_s").innerHTML = s+"秒"
             //在倒计时里面递归调用
             setTimeout(countTime,1000); 
        }
        var miaosha_lun=document.querySelector('.miaosha_lun')
        var miaosha_shuju=[
            {
                imgUrl:'../images/秒杀专区1.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区2.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区3.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区4.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区5.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区6.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区7.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区8.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
            {
                imgUrl:'../images/秒杀专区1.jpg',
                name:'55英寸级 三星QLED光量子点电视',
                youhui:'限时立省800元',
                price:'￥5199',
                discout:'￥5999'
            },
        ]
        miaosha_shuju.forEach((ele,index)=>{
            
            miaosha_lun.innerHTML+=` <section>
                    <img src="${ele.imgUrl}" alt="">
                    <ul>
                        <li>${ele.name}</li>
                        <li>${ele.youhui}</li>
                        <li>${ele.price}<span>${ele.discout}</span></li>
                    </ul>
                </section>`
        })
        //获取定位长条
      
       //获取按钮
       var back=document.querySelector('.back')
       var next1=document.querySelector('.next1')
       //创建监听事件，当点击按钮的时候长条向左移动
       move(next1,back,miaosha_lun)
       
    </script>
    <footer>
        <div class="f_t">
                <li> <i class="iconfont icon-kefu"></i>专业团队/提供当季优惠信息</li>
                <li> <i class="iconfont icon-fanbei"></i>七天无理由退货15天换货</li>
                <li> <i class="iconfont icon-tuijian"></i>官方正品请放心购买</li>
        </div>
        <div class="f_m">
            <section>
                <ul>
                    <li><a href="javascript:;">产品</a></li>
                    <li><a href="javascript:;">智能手机</a></li>
                    <li><a href="javascript:;">可穿戴设备</a></li>
                    <li><a href="javascript:;">平板/电脑/储存</a></li>
                    <li><a href="javascript:;">智能产品配件</a></li>
                    <li><a href="javascript:;">电视/影音/显示器</a></li>
                </ul>
                <ul>
                    <li><a href="javascript:;">我的订单</a></li>
                    <li><a href="javascript:;">我的积分</a></li>
                    <li><a href="javascript:;">优惠券</a></li>
                    <li><a href="javascript:;">个人资料</a></li>
                    <li><a href="javascript:;">收货地址</a></li>
                    <li><a href="javascript:;">我的三星</a></li>
                </ul>
            </section>
            <section>
                <ul>
                    <li><a href="javascript:;">网上商城指南</a></li>
                    <li><a href="javascript:;">常见问题</a></li>
                    <li><a href="javascript:;">三星网上商城账号</a></li>
                    <li><a href="javascript:;">产品和订单</a></li>
                    <li><a href="javascript:;">商城支付及发票</a></li>
                    <li><a href="javascript:;">商城支付及发票</a></li> 
                   
                    
                </ul>
                <ul>
                    <li><a href="javascript:;">服务支持</a></li>
                    <li><a href="javascript:;">关于商城</a></li>
                    <li><a href="javascript:;">关于三星</a></li>
                    <li><a href="javascript:;">售后忘带你查询</a></li>
                    <li><a href="javascript:;">联系我们</a></li>
                    
                </ul>
            </section>
            <section>
                <div>
                    <ul>
                        <li>服务中心</li>
                        <li>400-071-8899（09:00~22:00）</li>
                    </ul>
                    
                </div>
                <div>
                    <section>
                        <img src="../images/weixin.jpg" alt="">
                        <span>公众号</span>
                    </section>
                    <section>
                        <img src="../images/weibo.jpg" alt="">
                        <span>微博</span>
                    </section>
                    <section >
                        <img style="padding-top: 30px;" src="../images/xiazai.jpg" alt="">
                        <span>下载app</span>
                    </section>
                </div>
            </section>
        </div>
        <div class="f_b"></div>
    </footer>
    <div class="bangzhu">
        <p class="haha">您需要帮助吗？</p>
        <input class="yes" type="button" value="需要">
        <input class="no" type="button" value="别点！">
    </div>
    <script>
        var bangzhu=document.querySelector('.bangzhu')
        var yes=document.querySelector('.yes')
        //在打开网页的时候计时器就开始运行，1S之后将弹窗变为flex
        var timer=setTimeout(function(){
            bangzhu.style.display='flex'
        },1000)
        var bangzhu1=document.querySelector('.bangzhu')
        //在点击关闭之后，弹窗消失，同时计时器开始运行，3s之后再次将弹窗变为flex同时重复上面操作
        yes.addEventListener('click',function(){
            bangzhu.style.display='none'
            setTimeout(function(){
                bangzhu.style.display='flex'
            },3000)
        })
    </script>
    <script>
        let aImg=document.querySelectorAll('.shangpinzhanshi1 img')
        console.log(aImg);
        window.onscroll=function(){
            
            aImg.forEach(function(ele){
                if(ele.offsetTop<window.innerHeight+document.documentElement.scrollTop){
                
                ele.src=ele.getAttribute('_src')
            }
            })
        }
    </script>
        <script>
            //获取吸顶这个div
            var xiding=document.querySelector('.xiding')
            window.onscroll=function (){
                var top=document.documentElement.scrollTop
                if(top>=720){
                    xiding.style="position:fixed;top:50px;left:50%;transform:translate(-50%,-50%);"
                }else{
                    xiding.style="position:static"
                }
            }
            //开始渲染吸顶里面的内容，吸顶里面的内容分为两部分，图片和span
            var xidingneirong=[
                {
                    imgUrl:'../images/吸顶1.png',
                    ospan:'智能手机'
                },
                {
                    imgUrl:'../images/吸顶2.png',
                    ospan:'可穿戴设备'
                },
                {
                    imgUrl:'../images/吸顶3.png',
                    ospan:'智能平板'
                },
                {
                    imgUrl:'../images/吸顶4.png',
                    ospan:'智能配件'
                },
                {
                    imgUrl:'../images/吸顶5.png',
                    ospan:'个人电脑'
                },
                {
                    imgUrl:'../images/吸顶6.png',
                    ospan:'电视'
                },
                {
                    imgUrl:'../images/吸顶7.png',
                    ospan:'存储产品'
                },
                {
                    imgUrl:'../images/吸顶8.png',
                    ospan:'显示器'
                },
                {
                    imgUrl:'../images/吸顶9.png',
                    ospan:'影音产品'
                },
            ]
            //存放数据的数组已经建立，下一步是获取容器及循环数组向容器填充
            var xiding_nei=document.querySelectorAll('.xiding_nei')
            //确认获取
            //循环数组，将内容依次填充进准备好的容器中
            xidingneirong.forEach((ele,index)=>{
                var str1=` <a href="javascript:;">
                            <img src="${ele.imgUrl}" alt="">
                            </a>
                            <span>${ele.ospan}</span>`
                 xiding_nei[index].innerHTML+=str1 
    
    
            })
            var xiding_neinew=document.querySelectorAll('.xiding_nei')
            xiding_neinew.forEach((ele,index)=>{
               ele.addEventListener('click',function(){
                    window.scrollTo({
                        top:(index+1)*600,
                        behavior:'smooth'
                    })
                  
               })
            })
        </script>
          <script>
            let odenglu=document.querySelector('.denglu a')
            let username=sessionStorage.getItem('username')
            console.log(username)
            if(username!==null){
                odenglu.innerHTML=`欢迎,<span>${username}</span><i class="exit">退出</i>`
            }
            let oExit=document.querySelector('.exit')
            oExit.onclick=function(){
                sessionStorage.removeItem('username')
                location.href='../html/register.htm'
            }
        </script>
</body>
</html>